<template>
  <Wrapper>
    <el-row :gutter="30">
      <el-col :lg="5">
        <el-card shadow="never">
          <el-tree :data="data" :props="defaultProps" style="width: 100%" />
        </el-card>
      </el-col>
      <el-col :lg="19">
        <!-- 搜索区 -->
        <card-form ref="formRef" v-model="formData" :rules="rules">
          <el-row :gutter="30">
            <col-wrapper label="日志名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入日志名称" />
            </col-wrapper>
            <col-wrapper label="操作类型" prop="type">
              <el-select v-model="formData.type" placeholder="请选择操作类型" />
            </col-wrapper>
            <col-wrapper label="操作人" prop="operator">
              <el-select
                v-model="formData.operator"
                placeholder="请选择操作人"
              />
            </col-wrapper>
          </el-row>
          <el-row :gutter="30">
            <col-wrapper label="操作时间" prop="time">
              <el-date-picker
                v-model="formData.time"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                type="date"
                placeholder="请选择操作时间"
              />
            </col-wrapper>
            <col-wrapper label="操作内容" prop="content">
              <el-select
                v-model="formData.content"
                placeholder="请选择操作内容"
              />
            </col-wrapper>
            <col-wrapper>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </col-wrapper>
          </el-row>
          <template #content>
            <!-- 表格展示 -->
            <data-table :data="tableData" :columns="columns">
              <template #tags="{ item }">
                <el-tag
                  v-for="tag in item.tags"
                  :key="tag"
                  :type="tag === 'loser' ? 'warning' : 'success'"
                >
                  {{ tag.toUpperCase() }}
                </el-tag>
              </template>
              <template #isDebut="{ item }">
                <el-tag :type="item.isDebut ? 'success' : 'warning'">{{
                  item.isDebut ? '已出道' : '正在练习'
                }}</el-tag>
              </template>
              <template #skill="{ item }">
                <el-tag v-for="tag in item.skill" :key="tag">
                  {{ tag }}
                </el-tag>
              </template>
              <template #action="{ item }">
                <el-space>
                  <el-button size="small" type="primary">编辑</el-button>
                  <el-button
                    size="small"
                    @click="
                      $router.push({
                        path: '/system/logDetail',
                        query: {
                          item: encodeURIComponent(JSON.stringify(item)),
                        },
                      })
                    "
                    >详情</el-button
                  >
                </el-space>
              </template>
            </data-table>
          </template>
        </card-form>
      </el-col>
    </el-row>
  </Wrapper>
</template>

<script setup>
import useForm from '@/hooks/useForm'
import CardForm from '@/components/wrapper/card-form'
import ColWrapper from '@/components/wrapper/col'

const DataTable = defineAsyncComponent(() => import('@/components/table'))

const { formData, formRef } = useForm({
  name: '',
  type: '',
  operator: '',
  time: '',
  content: '',
})

const rules = {
  name: [{ required: true, message: '请输入日志名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择操作类型', trigger: 'change' }],
  operator: [{ required: true, message: '请选择操作人', trigger: 'change' }],
  time: [{ required: true, message: '请选择操作时间', trigger: 'change' }],
}
const data = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [{ abel: 'Level three 1-1-1' }],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [{ label: 'Level three 2-1-1' }],
      },
      {
        label: 'Level two 2-2',
        children: [{ label: 'Level three 2-2-1' }],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [{ label: 'Level three 3-1-1' }],
      },
      {
        label: 'Level two 3-2',
        children: [{ label: 'Level three 3-2-1' }],
      },
    ],
  },
]
const tableData = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
].map((item, index) => {
  const isOldNum = index % 2 === 0
  return {
    ...item,
    name: `ikun练习生${index + 1}号`,
    date: '2024-10-03',
    tips: isOldNum
      ? '你已经出道，请发扬光大'
      : '我是练习时长两年半的个人练习生',
    isDebut: isOldNum ? 1 : 0,
    skill: isOldNum ? ['篮球', '坤拳', '唱跳rap'] : ['鸡你太美', '坤坤'],
    saying: isOldNum ? '中分头，背带裤，我是ikun你记住' : '我真的不是小黑紫',
  }
})
const columns = [
  { label: '姓名', prop: 'name' },
  { label: '年龄', prop: 'age' },
  { label: '地址', prop: 'address', slot: 'address' },
  { label: '标签', prop: 'tags', slot: 'tags' },
  { label: '联系日期', prop: 'date' },
  { label: '出道说明', prop: 'tips' },
  { label: '是否已出道', prop: 'isDebut', slot: 'isDebut' },
  { label: '技能', prop: 'skill', slot: 'skill' },
  { label: '口头禅', prop: 'saying' },
  { label: '操作', slot: 'action', fixed: 'right', width: 140 },
].map((item) => ({
  ...item,
  width: item.width,
}))
const defaultProps = {
  children: 'children',
  label: 'label',
}

async function search() {
  await formRef.value.formRef.validate()
}

function reset() {
  formRef.value.formRef.resetFields()
}
</script>

<style scoped>
.card-box {
  margin-top: 0;
}
</style>
